<template>
    <div class="home">
        <!--banner start-->
        <div id="slider">
            <div class="swiper-container clearfix">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide"><a href="Orchard_fragrance.html"><img src="@/assets/images/images/banner1.png"/></a></li>
                    <li class="swiper-slide"><a href="Birthday_zone.html"><img src="@/assets/images/images/banner2.jpg"/></a></li>
                    <li class="swiper-slide"><a href="Integral_mall.html"><img src="@/assets/images/images/banner3.jpg"/></a></li>
                </ul>
            </div>
            <!--
            <div class="slider-btn clearfix">
                <span class="active"></span>
                <span></span>
                <span></span>
            </div>
            -->
            <div class="swiper-pagination"></div>
        </div>
        <!--banner end-->

        <!--nav start-->
        <div id="nav">
            <nav class="clearfix">
                <a href="Integral_mall.html">
                    <img src="@/assets/images/1.png" />
                    <span>积分商城</span>
                </a>
                <a href="Media.html">
                    <img src="@/assets/images/2.png" />
                    <span>影音天地</span>
                </a>
                <a href="Birthday_zone.html">
                    <img src="@/assets/images/3.png" />
                    <span>生日专区</span>
                </a>
                <a href="Orchard_fragrance.html">
                    <img src="@/assets/images/4.png" />
                    <span>果园飘香</span>
                </a>
                <a href="Inner_page.html">
                    <img src="@/assets/images/5.png" />
                    <span>关爱健康</span>
                </a>
                <a href="Seasonal_selection.html">
                    <img src="@/assets/images/6.png" />
                    <span>应季甄选</span>
                </a>
                <a href="Inner_page.html">
                    <img src="@/assets/images/7.png" />
                    <span>轻松出行</span>
                </a>
                <a href="Inner_page.html">
                    <img src="@/assets/images/8.png" />
                    <span>景点门票</span>
                </a>
                <div class="edmond clearfix">
                    夏季炎热签收水果前请确认
                <span class="sprite-icon"></span>
                    <!--<div class="swiper-container edmond_child">
                        <ul class="swiper-wrapper edmond_width clearfix">
                            <li class="swiper-slide edmond_con fl">
                                夏季炎热签收水果前请确认
                            </li>
                            <li class="swiper-slide edmond_con fl">
                                夏季炎热签收水果前请确认
                            </li>
                            <li class="swiper-slide edmond_con fl">
                                夏季炎热签收水果前请确认
                            </li>
                            <li class="swiper-slide edmond_con fl">
                                夏季炎热签收水果前请确认
                            </li>
                            <li class="swiper-slide edmond_con fl">
                                夏季炎热签收水果前请确认
                            </li>
                        </ul>
                    </div>-->
                </div>
            </nav>
        </div>

        <!--生日专区 end-->
        <main>
            <div class="floor clearfix">
                <div class="floor-container">
                    <div class="title-wrap">
                        <span class="sprite-icon secskill-icon fl"></span>
                        <h2 class="secskill-title fl">最新上映</h2>
                        <a href="Media.html">
                            <div class="secskill-more fr">
                                <span>查看更多</span>
                                <span class="sprite-icon"></span>
                            </div>
                        </a>
                    </div>
                    <div class="secskill-content">
                        <ul class="swiper-wrapper">
                            <li class="swiper-slide">
                                <a href="Quick_ticket.html"><img src="@/assets/images/move/index_11.png" /></a>
                                <p class="secskill-main clearfix"><span class="secskill-title-con">美国队长3</span><span class="secskill-number">8.0</span></p>
                            </li>
                            <li class="swiper-slide">
                                <a href="Quick_ticket.html"><img src="@/assets/images/move/move2.png" /></a>
                                <p class="secskill-main clearfix"><span class="secskill-title-con">霍比特人</span><span class="secskill-number">8.0</span></p>
                            </li>
                            <li class="swiper-slide">
                                <a href="Quick_ticket.html"><img src="@/assets/images/move/move3.png" /></a>
                                <p class="secskill-main clearfix"><span class="secskill-title-con">简爱</span><span class="secskill-number">7.9</span></p>
                            </li>
                            <li class="swiper-slide">
                                <a href="Quick_ticket.html"><img src="@/assets/images/move/index_11.png" /></a>
                                <p class="secskill-main clearfix"><span class="secskill-title-con">美国队长3</span><span class="secskill-number">8.0</span></p>
                            </li>
                            <li class="swiper-slide">
                                <a href="Quick_ticket.html"><img src="@/assets/images/move/index_11.png" /></a>
                                <p class="secskill-main clearfix"><span class="secskill-title-con">美国队长3</span><span class="secskill-number">8.0</span></p>
                            </li>
                            <li class="swiper-slide">
                                <a href="Quick_ticket.html"><img src="@/assets/images/move/index_11.png" /></a>
                                <p class="secskill-main clearfix"><span class="secskill-title-con">美国队长3</span><span class="secskill-number">8.0</span></p>
                            </li>
                            <li class="swiper-slide">
                                <a href="Quick_ticket.html"><img src="@/assets/images/move/index_11.png" /></a>
                                <p class="secskill-main clearfix"><span class="secskill-title-con">美国队长3</span><span class="secskill-number">8.0</span></p>
                            </li>
                            <li class="swiper-slide">
                                <a href="Quick_ticket.html"><img src="@/assets/images/move/index_11.png" /></a>
                                <p class="secskill-main clearfix"><span class="secskill-title-con">美国队长3</span><span class="secskill-number">8.0</span></p>
                            </li>
                            <li class="swiper-slide">
                                <a href="Quick_ticket.html"><img src="@/assets/images/move/index_11.png" /></a>
                                <p class="secskill-main clearfix"><span class="secskill-title-con">美国队长3</span><span class="secskill-number">8.0</span></p>
                            </li>
                            <li class="swiper-slide">
                                <a href="Quick_ticket.html"><img src="@/assets/images/move/index_11.png" /></a>
                                <p class="secskill-main clearfix"><span class="secskill-title-con">美国队长3</span><span class="secskill-number">8.0</span></p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--描述：nav adv -->
            <div class="adv">
                <img src="@/assets/images/images/birthday.png" />
            </div>
            <!--描述：nav adv -->
            <!--floor start-->
            <div class="floor clearfix">
                <div class="floor-container">
                    <div class="title-wrap">
                        <span class="sprite-icon secskill-icon fl"></span>
                        <h2 class="secskill-title fl">生日专区</h2>
                        <a href="Birthday_zone.html">
                            <div class="secskill-more fr">
                                <span>查看更多</span>
                                <span class="sprite-icon"></span>
                            </div>
                        </a>
                    </div>
                    <div class="floor-container morencon">
                            <div class="left">
                                <a href="Birthday_zone.html"><img src="@/assets/images/birthday/fuirt.png"/></a>
                            </div>
                        <div class="right">
                                <div class="top">
                                    <a href="Birthday_zone.html"><img src="@/assets/images/birthday/friut2.png"></a>
                                </div>
                                <div class="bottom">
                                    <a href="Birthday_zone.html" class="line"><img src="@/assets/images/birthday/birth3.png"/></a>
                                    <a href="Birthday_zone.html" ><img src="@/assets/images/birthday/birth3-07.png"/></a>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--floor start-->
            <!--floor_2 start-->
            <div class="floor clearfix">
                <div class="floor-container">
                    <div class="title-wrap">
                        <span class="sprite-icon secskill-icon fl"></span>
                        <h2 class="secskill-title fl">果园飘香</h2>
                        <a href="Orchard_fragrance.html">
                            <div class="secskill-more fr">
                                <span>查看更多</span>
                                <span class="sprite-icon"></span>
                            </div>
                        </a>
                    </div>
                    <div class="floor-container">
                            <div class="left">
                                <a href="Orchard_fragrance.html" class="line"><img src="@/assets/images/furit/fuirt-08.png"/></a>
                            </div>
                        <div class="right">
                                <div class="top">
                                    <a href="Orchard_fragrance.html"><img src="@/assets/images/furit/friut2-09.png"/></a>
                                </div>
                                <div class="top topline">
                                    <a href="Orchard_fragrance.html"><img src="@/assets/images/furit/friut2-10.png"/></a>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        <!--floor_2 start-->
        <!--floor_3 start-->
            <div class="floor clearfix">
                <div class="floor-container">
                    <div class="title-wrap">
                        <span class="sprite-icon secskill-icon fl"></span>
                        <h2 class="secskill-title fl">积分商城</h2>
                        <a href="Integral_mall.html">
                            <div class="secskill-more fr">
                                <span>查看更多</span>
                                <span class="sprite-icon"></span>
                            </div>
                        </a>
                    </div>
                    <div class="floor-container center clearfix">
                        <div class="floor_left">
                            <a href="Integral_mall.html" class="line"><img src="@/assets/images/integral/jf-13.png"/></a>
                            <a href="Integral_mall.html" class="topline"><img src="@/assets/images/integral/jf-14.png"/></a>
                        </div>
                        <div class="foor_right">
                            <a href="Integral_mall.html"><img src="@/assets/images/integral/jf-15.png"/></a>
                            <a href="Integral_mall.html" class="addsty topline"><img src="@/assets/images/integral/jf.png"/></a>
                        </div>
                    </div>
                </div>
            </div>
        <!--floor_3 start-->
        </main>
    </div>
</template>
<script>
import Swiper from 'swiper';
export default {
    mounted(){
        // console.log(Swiper);
        var mySwiper = new Swiper('.swiper-container', {
            autoplay: 4000,//可选选项，自动滑动，手指触屏滑动会停止自动轮播
            autoplayDisableOnInteraction : false,//手指触屏滑动之后，重新开启自动轮播
            initialSlide :0,//初始显示的li的索引
            speed : 1000,//滑动的速度
            observer:true,//当li节点被修改的时候自动更新Swiper
            observeParents:true,//当容器container宽度改变的时候(window.onresize或者自适应)自动更新Swiper
            grabCursor : true,//鼠标抓手形状，触屏看不到
            pagination : '.swiper-pagination',//下面的图标跟随切换
            loop : true,//无缝轮播 自动在li列表的前面添加最后一个，在li列表后面添加第一个
        });
        var mySwiper1 = new Swiper('.secskill-content', {
            initialSlide :0,//初始显示的li的索引
            speed : 1000,//滑动的速度
            observer:true,//当li节点被修改的时候自动更新Swiper
            observeParents:true,//当容器container宽度改变的时候(window.onresize或者自适应)自动更新Swiper
            slidesPerView : 3,//'auto'
        }); 
    }
}
</script>
